<template>
  <div>
    <!-- <img src="@/assets/image1.png" ref="loginImg" width="100" height="100"> -->
    <canvas ref="myCanvas" width="300" height="300"></canvas>
  </div>
</template>

<script>
export default {
  name: "App",

  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {
    ///获取画布的dom对象
    var c = this.$refs.myCanvas;
    ///获取画布
    var ctx = c.getContext("2d");
    ///获取图片对象
    /// let img = this.$refs.loginImg
    let img = new Image();
    img.onload = function () {
      console.log(this);
      ctx.drawImage(img, 0, 0, 300, 300);
      ///开始绘制路径
      ctx.beginPath();
      // /ctx.lineWidth=10;//线条粗细
      /// ctx.strokeStyle = "#0000ff"//线条颜色
      ///把路径移动到画布中的指定点
      ctx.moveTo(10, 10);
      ///添加一个新点
      ctx.lineTo(150, 10);
      ctx.lineTo(150, 150);
      ctx.lineTo(10, 150);
      ///关闭路径
      ctx.closePath();
      ///绘制已定义的路径
      ctx.stroke();
      ///填充颜色
      ctx.fillStyle = "#ff0000";
      ///填充路径
      ctx.fill();
      ctx.fillStyle = "green"; ///矩形颜色
      ///填充路径矩形
      ctx.fillRect(20, 20, 150, 100);
      ///开始绘制圆
      ctx.beginPath();
      ///创建圆形路径
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.strokeStyle = "#fff";
      ctx.stroke();
      ctx.fillStyle = "#fff";
      ctx.fill();
    };
    /// img.src = require("@/assets/image1.png");
    img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fscenery.image.nihaowang.com%2Fscenery%2F150%2F3321%2F201110281046016093.jpg&refer=http%3A%2F%2Fscenery.image.nihaowang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653483818&t=1cb9b497e09f1da255d961a53d64a8da'
  },
};
</script>

<style>
</style>
